<template>
  <div class="czr-ellipsis" ref="ref_main">
    <div class="czr-ellipsis-temp" ref="ref_temp">{{ value }}</div>
    <el-tooltip
      :disabled="!state.isEllipsis"
      :content="String(value)"
      placement="top"
      popper-class="__cus-popover"
    >
      <div class="__text-ellipsis">{{ value }}</div>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrEllipsis',
})
import { ref, reactive, watch, nextTick } from 'vue'
const props = defineProps({
  value: {
    required: true,
    default: '',
  },
  always: { default: false },
})
const state = reactive({
  isEllipsis: false,
})
const ref_main = ref()
const ref_temp = ref()
watch(
  () => props.value,
  (n) => {
    if (n) {
      nextTick(() => {
        state.isEllipsis =
          props.always ||
          ref_temp.value?.clientWidth > ref_main.value?.clientWidth
      })
    }
  },
  { immediate: true },
)
</script>

<style scoped lang="scss">
.czr-ellipsis {
  width: 100%;
  .czr-ellipsis-temp {
    word-break: break-all;
    white-space: nowrap;
    position: absolute;
    visibility: hidden;
  }
}
</style>
